$c: grey;
$bg: $c;
$dis: block !default;
@mixin bgc {
  $bg: mix($bg, #eee) !global;
  background-color: $bg;
}
@mixin ma {
  margin: 0;
  padding: 0;
}

body {
  @include ma;
}

.container {
  max-width: 1000px;
  border: 1px solid transparent;
  margin: auto;

  header {
    @include bgc;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    text-align: center;
    h2,h3 {
      @include ma;
    }
    h3 {
      position: relative;
      margin-top: 5px;
      left: 30px;
    }

    p {
      text-indent: 32px;
      text-align: start;
      margin: 0;
      padding: 10px 0;
    }
  }

  nav {
    height: 35px;
    @include bgc;
    @mixin ahover {
      font-weight: bold;
      font-size: 16px;
      color: white;
    }
    @mixin adis {
      color: $c;
      text-decoration: none;
      padding: 0 10px;
    }

    ul {
      list-style: none;
      @include ma;
      a {
        @include adis;
      }

      a:hover {
        @include ahover;
      }
    }

    > ul{
      > li:nth-child(3):hover {
        @mixin uldis {
          display: block;
          @include bgc;
          position: absolute;
          padding: 10px;
        }

        > ul {
          @include uldis;

          > li:first-child:hover {
            > ul {
              @include uldis;
              left: 80px;
              top: 1px;
            }
          }
        }
      }

      ul {
        display: none;
      }
    }
  }
  section{
    display: flex;
    flex-wrap: wrap;
    @include bgc;
    > h1{
      width: 100%;
      padding-left: 10px;
    }
    > .product{
      width: 70px;
      margin: 5px;
      text-align: center;
      overflow: hidden;
    >img{
      width: 100%;
      height: 80px;
    }
    h5,p{
    @include ma;
    }
    > p{
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 0.875em;
    }
    > p:hover{
      white-space: nowrap;
      width: 1000px;
      position: relative;
      animation: tran linear 15s infinite;
    }
    @keyframes tran {
      0%{
        left: 0;
      }

      100%{
        left: -1000px;
      }
    }
    }
  }
  @media(min-width: 450px) {
    header {
      display: block;
    }

    nav {
      margin:10px 0;
      > ul {
        display: block;
        > li {
          display: inline-block;
          line-height: 35px;
        }
      }

      > h3 {
        display: none;
      }
    }
  }
  @media(max-width: 449px) {
    header {
      display: none;
    }

    nav {
        margin: 10px 0 10px 0;
      > h3 {
        display: block;
        line-height: 35px;
        @include ma;
        padding-left: 10px;
        width: 90px;
      }
      > ul {
        display: none;
      }
      > .adapPhone{
        display: block;
        background: radial-gradient(white,grey);
        position: absolute;
        padding: 10px;
        > li{
          padding: 5px 0;
        }
         ul{
          position: absolute;
          left: 60px;
          top: 80px;
        }
      }
    }
    section{
      text-align: center;
      justify-content:center;
      .product{
        width: 45%;
        > img{
          height: 220px;
        }
      }
    }
  }

  > footer{
    height: 100px;
    @include bgc;
    // background: radial-gradient(yellow, pink,red,blue,green,grey,white);
  }
}
